<template>
  <view class="TeamMessageList">
    <EmptyBox v-if="!teamMessageList.length" />
    <scroll-view
      v-else
      scroll-y="true"
      class="scroll"
      @scrolltolower="handleGetMoreData"
    >
      <view class="list">
        <TeamMessageItem
          v-for="(item, index) in teamMessageList"
          :key="index"
          :messageDetail="item"
          @refreshMessageList="handleRefreshList"
        />
      </view>
    </scroll-view>
  </view>
</template>

<script>
import TeamMessageItem from "../../../components/MyMessage/TeamMessageItem.vue";
import EmptyBox from "../../../components/public/EmptyBox.vue";
import { mapState } from "vuex";
export default {
  name: "TeamMessageList",
  components: {
    TeamMessageItem,
    EmptyBox,
  },
  data() {
    return {
      isEnd: false,
      isMore: false,
      currentPage: 0,
    };
  },
  computed: { ...mapState("m_message", ["teamMessageList"]) },
  mounted() {
    this.getMessageList();
  },
  beforeDestroy() {
    this.updateMessageStatus(); // 组件卸载时更新消息已读
    this.deleteMessage(); // 卸载时删除过期的消息
    this.$store.commit("m_message/clearMessageList", 1);
  },
  methods: {
    // 获取队伍列表
    async getMessageList(page = 0, limitCount = 10) {
      const userId = this.$store.state.userInfo._openid;
      await this.$store.dispatch("m_message/getMessageList", {
        type: 1,
        userId,
        page,
        limitCount,
      });
    },

    // 子组件进行操作，刷新队伍列表
    handleRefreshList(type) {
      this.$store.commit("m_message/clearMessageList", type);
      this.getMessageList();
    },

    // 更改消息状态
    async updateMessageStatus() {
      const messageList = this.teamMessageList.filter((item) => !item.isView);
      try {
        for (let i = 0; i < messageList.length; i++) {
          const isView = true,
            messageId = messageList[i]._id;
          // 判断map遍历状态为未读的情况
          await this.$store.dispatch("m_message/updateMessageStatus", {
            isView,
            messageId,
          });
        }
      } catch (err) {
        console.log("更改消息状态失败：", err);
      }
    },

    // 判断超过一天的消息进行删除
    async deleteMessage() {
      const messageList = this.teamMessageList.filter((item) => {
        // 时间超过一天并且没有操作的消息删除
        if (
          Math.floor(new Date().getTime() / 1000) -
            Math.floor(new Date(item.createTime).getTime() / 1000) >
            86400 &&
          item.isHandle === undefined
        ) {
          return true;
        } else if (
          // 超过一天并且已经进行操作处理的消息处理
          Math.floor(new Date().getTime() / 1000) -
            Math.floor(new Date(item.createTime).getTime() / 1000) >
            86400 &&
          item.isHandle
        ) {
          return true;
        } else {
          return false;
        }
      });
      try {
        for (let i = 0; i < messageList.length; i++) {
          const messageId = messageList[i]._id;
          await this.$store.dispatch("m_message/removeMessage", messageId);
        }
      } catch (err) {
        console.log("删除消息失败：", err);
      }
    },

    // 上拉获取更多
    async handleGetMoreData() {
      if (this.isEnd) {
        return;
      }
      if (this.isMore) {
        return;
      }
      uni.showLoading({
        title: "加载更多数据",
      });
      this.isMore = true;
      const page = ++this.currentPage,
        userId = this.$store.state.userInfo._openid,
        lastLength = this.teamMessageList.length;
      await this.$store.dispatch("m_message/getMessageList", {
        type: 1,
        userId,
        page,
        limitCount: 10,
      });
      const currentLength = this.teamMessageList.length;
      if (lastLength === currentLength) {
        this.isEnd = true;
      }
      this.isMore = false;
      uni.hideLoading();
      console.log("到达底部");
    },
  },
};
</script>

<style scoped lang="scss">
.scroll {
  height: calc(100vh - 120rpx);
}
</style>
